<template>
    <ul class="products banxin tanxin">
        <li v-for="item in arr" :key="item.id" @click="$router.push(`/particulars/${item.id}`)">
            <div class="box">
                <img class="proImg" :src="'http://sc.wolfcode.cn' + item.coverImg" alt="" />
                <h3>{{ item.name }}</h3>
                <section>
                    <span>{{ item.coin }}</span>
                    <img width="20" src="../assets/images/home/monad.png" alt="" />
                </section>
                <div class="btn">立即兑换</div>
                <img class="imh" v-show="item.isHotSale === 1" src="../assets/images/home/hot-j.png" alt="" />
                <img class="imh" v-show="item.isLatest === 1" src="../assets/images/home/new-j.png" alt="" />
            </div>
        </li>
    </ul>
</template>
  
<script>
export default {
    data() {
        return {};
    },
    props: ["arr"],
};
</script>
   
<style lang = "less" scoped>
@import "../assets/base.less";

.products {
    flex-wrap: wrap;
    display: flex;
    justify-content: flex-start !important;

    li {
        margin-right: 20px;
        width: 285px;
        text-align: center;
        cursor: pointer;
        margin-bottom: 30px;

        &:nth-of-type(4n) {
            margin-right: 0;
        }

        &:hover {
            .box {
                top: -10px;

                .btn {
                    color: #fff;
                    background: @blue;
                }
            }
        }

        .box {
            position: relative;
            background: #fff;
            top: 0;
            transition: top 0.5s linear;
            padding-bottom: 32px;

            .proImg {
                width: 285px;
                height: 250px;
            }

            h3 {
                font-size: 18px;
                margin-top: 22px;
                margin-bottom: 16px;
            }

            section {
                margin-bottom: 20px;
                font-size: 18px;
                font-weight: bold;
                color: @orange;
            }

            .btn {
                width: 100px;
                height: 36px;
                border: 1px solid @blue;
                line-height: 36px;
                color: @blue;
                cursor: pointer;
                margin: auto;
            }

            .imh {
                position: absolute;
                top: 0;
                left: 0;
            }
        }
    }
}
</style>